import React from 'react'
import { Card, Form, Input, Radio, InputNumber, Switch, Upload, Icon, TimePicker, Select, DatePicker, AutoComplete, Checkbox, Button } from 'antd'
import moment from 'moment'


const FormItem = Form.Item;
const Option = Select.Option;
const AutoCompleteOption = AutoComplete.Option;
const RadioGroup = Radio.Group;

class Register extends React.Component {

    state = {

    }

    getBase64 = (img, callback) => {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    }
    // 处理上传头像的函数
    handleChange = (info) => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            this.getBase64(info.file.originFileObj, imageUrl => this.setState({
                imageUrl,
                loading: false,
            }));
        }
    }

    //获取所有表单控件的值
    handleAllValue = () => {
        const formInfo = this.props.form.getFieldsValue()
        console.log(JSON.stringify(formInfo))
    }



    render() {
        const { TextArea } = Input;
        const { getFieldDecorator } = this.props.form;
        // 配置页面布局的格式
        const formItemLayout = {
            //labelCol: label 标签布局，同 <Col> 组件，设置 span offset 值，如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12}
            //xs <576px  sm ≥576px
            labelCol: {
                xs: 24,
                sm: 4
            },
            // wrapperCol 是一个对象	需要为输入控件设置布局样式时，使用该属性，用法同 labelCol
            wrapperCol: {
                xs: 24,
                sm: 20
            }
        }
        // 用户协议和注册按钮的布局
        const offsetLayout = {
            wrapperCol:{
                xs:24,
                sm:{
                    span:12,
                    offset:4
                }
            }
        }

        // 定义联系地址 文本域的高度
        const Objsize = { minRows: 2, maxRows: 6 }
        //上传头像定义的参数
        const imageUrl = this.state.imageUrl;
        return (
            <div>
                <Card title="注册表单" className="warp">
                    <Form layout="horizontal">
                        <FormItem label="用户名" {...formItemLayout}>
                            {getFieldDecorator('username', {
                                initialValue: 'Jack',
                                rules: [
                                    {
                                        required: true,
                                        message: 'Please input your username!'
                                    },
                                    {
                                        max: 10, min: 6,
                                        message: '请输入合适的长度'
                                    },
                                    {
                                        pattern: new RegExp('^\\w+$', 'g'),
                                        message: '输入的字符不匹配'
                                    }
                                ],
                            })(
                                <Input prefix={<Icon type="user" />} placeholder="请输入用户名" />
                            )}
                        </FormItem>
                        <FormItem label="密码" {...formItemLayout}>
                            {getFieldDecorator('password', {
                                initialValue: '123456',
                                rules: [
                                    {
                                        required: true,
                                        message: 'Please input your username!'
                                    }
                                ],
                            })(
                                <Input prefix={<Icon type="lock" />} type="password" placeholder="请输入密码" />
                            )}
                        </FormItem>
                        <FormItem label="性别" {...formItemLayout}>
                            {
                                getFieldDecorator('sex', {})(
                                    <RadioGroup>
                                        <Radio value={1}>男</Radio>
                                        <Radio value={2}>女</Radio>
                                    </RadioGroup>
                                )
                            }
                        </FormItem>
                        <FormItem label="年龄" {...formItemLayout}>
                            {
                                getFieldDecorator('age', {
                                    initialValue: 18
                                })(
                                    <InputNumber min={1} max={100} />
                                )
                            }
                        </FormItem>
                        <FormItem label="当前状态" {...formItemLayout}>
                            {
                                getFieldDecorator('state', {
                                    initialValue: '婳婳的书'
                                })(
                                    <Select>
                                        <Option value="1">婳婳的书</Option>
                                        <Option value="2">川岛沙子</Option>
                                        <Option value="3">一片一片叶子</Option>
                                        <Option value="4">对啊，是小咸鱼</Option>
                                        <Option value="5">咸鱼一条</Option>
                                    </Select>
                                )
                            }
                        </FormItem>
                        <FormItem label="爱好" {...formItemLayout}>
                            {
                                getFieldDecorator('hobby', {
                                    initialValue: '钢琴'
                                })(
                                    <Select mode='multiple'>
                                        <Option value="1">钢琴</Option>
                                        <Option value="2">瑜伽</Option>
                                        <Option value="3">英语</Option>
                                        <Option value="4">睡觉</Option>
                                        <Option value="5">看小说</Option>
                                    </Select>
                                )
                            }
                        </FormItem>
                        <FormItem label="是否已婚" {...formItemLayout}>
                            {
                                getFieldDecorator('isMarry', {
                                    initialValue: true,
                                    valuePropName: 'checked'
                                })(
                                    <Switch />
                                )
                            }
                        </FormItem>
                        <FormItem label="生日" {...formItemLayout}>
                            {
                                getFieldDecorator('birthday', {
                                    initialValue: moment('2018-11-02')
                                })(
                                    <DatePicker />
                                )
                            }
                        </FormItem>
                        <FormItem label="联系地址" {...formItemLayout}>
                            {
                                getFieldDecorator('address', {
                                    initialValue: '蚌埠市龙子湖区蚌埠学院4号楼'
                                })(
                                    <TextArea
                                        autosize={
                                            Objsize
                                        }
                                    />
                                )
                            }
                        </FormItem>
                        <FormItem label="早起时间" {...formItemLayout}>
                            {
                                getFieldDecorator('time', {
                                    initialValue: moment('00:07:00', 'HH:mm:ss')
                                })(
                                    <TimePicker />
                                )
                            }
                        </FormItem>
                        <FormItem label="头像" {...formItemLayout}>
                            {
                                getFieldDecorator('avatar', {
                                    // initialValue: 
                                })(
                                    <Upload
                                        listType='picture-card'  //上传图像的形式
                                        showUploadList={false} //是否展示上传文件
                                        action="//jsonplaceholder.typicode.com/posts/"
                                        onChange={this.handleChange}
                                    >
                                        {this.state.imageUrl ? <img src={imageUrl} alt="avatar" /> : <Icon type="plus" />}
                                    </Upload>
                                )
                            }
                        </FormItem>
                        <FormItem {...offsetLayout}>
                            {
                                getFieldDecorator('check', {
                                    
                                })(
                                    <Checkbox>我已阅读过<a href="#">慕课协议</a></Checkbox>
                                )
                            }
                        </FormItem>
                        <FormItem {...offsetLayout}>
                            <Button type="primary" onClick={this.handleAllValue}>注册</Button>
                        </FormItem>
                    </Form>
                </Card>
            </div>
        )
    }
}


export default Form.create()(Register)